|
遇到问题 在父组件想通过ref的方式获取到子组件的方法或者属性时,发现不好使因为获取到的是current:null。经过学习了解，在react中想通过ref获取子组件的实例，子组件必须是类组件才行。关于函数组件的获取方法就有了以下的教程。
用到技术
forwardRefforwardRef 是 React 提供的一个高阶函数（Higher-Order Function），用于在函数组件中转发 ref。示例import React, { forwardRef } from 'react';
const ChildComponent = forwardRef((props, ref) => {
// 子组件的内容
return Child Component;
});
export default ChildComponent;
useImperativeHandleuseImperativeHandle 是 React 的一个钩子函数，用于在函数组件中自定义暴露给父组件的实例值或方法通常情况下，函数组件的内部状态和方法是对外隐藏的，父组件无法直接访问或调用。但是，在某些情况下，我们可能希望函数组件能够向外部暴露一些特定的实例值或方法，这时就可以使用 useImperativeHandle。useImperativeHandle 接收两个参数：ref 和一个回调函数。回调函数可以返回一个对象，该对象中的属性和方法将会成为父组件中通过 ref 访问到的实例值或方法。示例import React, { forwardRef, useImperativeHandle } from 'react';
const ChildComponent = forwardRef((props, ref) => {
const internalMethod = () => {
console.log('Internal method called!');
};
useImperativeHandle(ref, () => ({
externalMethod: () => {
console.log('External method called!');
},
internalMethod
}));
return Child Component;
});
export default ChildComponent;
完整示例import React, { forwardRef, useImperativeHandle } from 'react';
/**这里有不同需要使用forwardRef包裹 */
const ChildComponent = forwardRef((props, ref) => {
const internalMethod = () => {
console.log('Internal method called!');
};
useImperativeHandle(ref, () => ({
externalMethod: () => {
console.log('External method called!');
},
internalMethod
}));
return Child Component;
});
export default ChildComponent;
2023-7-23 遇到新问题当我在项目中使用到dva或者redux的connect来转发数据时无法获取到数据所以有了一下的补充在dva中的代码如下
import React, {forwardRef, useImperativeHandle } from 'react'
import { connect } from 'umi'
const AddEditSite = (props) => {
const {
dispatch,
/**转发Ref */
refInstance,
} = props
const mapDispatchToProps = {
}
const {
} = mapDispatchToProps
useImperativeHandle(refInstance, () => ({
show: (values, type) => {
console.log(values, type);
setAddOrEditType(type)
setOpen(true)
},
}));
return ()
}
const mapStateToProps = (state) => {
return {
}
}
/**这里也有所不同 */
const ConnectedAddEditSite = connect(mapStateToProps)(AddEditSite);
export default forwardRef((props, ref) => );
具体原因现在还没有搞明白后期再来学习需要的资料 React Redux官网
|